<template>
  <svg :style="{ width, height, }">
    <!-- xlink:href 是使用哪个svg的图标 fill是更改图标的颜色 -->
    <use :xlink:href="prefix + name" :fill="color"></use>
    <!-- <path xlink:href="#icon-user" fill="red"></path> -->
  </svg>
</template>

<script setup lang="ts" name="svgIcon">
interface ISvgIcon {
  color?: string,
  prefix?: string,
  name: string,
  width?: string,
  height?: string,
}
withDefaults(defineProps<ISvgIcon>(), {
  color: "#7f8c8d",
  prefix: "#icon-",
  width: "16px",
  height: "16px",
})
</script>

<style lang="scss" scoped></style>